<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

    <input id="debounce" type="text">
    <ul id="list">

    </ul>
    <script>
      // 防抖函数
      function debounce(func, wait = 50) {
        let timer = null

        return function (...args) {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            func.apply(this, args)
          }, wait)
        }
      }

      function ajax (content) {
        console.log('ajax request ' + content)
      }
 
      let debounceAjax = debounce(ajax, 1000)

      let inputc = document.getElementById('debounce')
      inputc.addEventListener('keyup', function(e) {
        debounceAjax(e.target.value)
      })
    </script>
  </body>
</html>
